<template>
    <div class="content_wrapper">
        <div class="container">
            <div class="lyecs-table-list-warp">
                <div class="list-table-tool lyecs-search-warp">
                    <el-form :model="filterParams">
                        <div class="advanced-search-warp list-table-tool-row">
                            <div class="simple-form-warp">
                                <div class="simple-form-field">
                                    <div class="form-group">
                                        <label class="control-label"><span>申请时间：</span></label>
                                        <div class="control-container">
                                            <SelectTimeInterval
                                                type="date"
                                                v-model:start-date="filterParams.add_time_start"
                                                v-model:end-date="filterParams.add_time_end"
                                            ></SelectTimeInterval>
                                        </div>
                                    </div>
                                </div>
                                <div class="simple-form-field">
                                    <div class="form-group">
                                        <label class="control-label"><span>提现状态：</span></label>
                                        <div class="control-container">
                                            <el-select v-model="filterParams.status" clearable>
                                                <el-option v-for="(item,index) in status_list" :value="index" :label="item" />
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <div class="simple-form-field">
                                    <el-button type="primary" @click="onSearchSubmit">搜索</el-button>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
                <div class="table-container">
                    <a-spin :spinning="loading">
                        <el-table
                            :data="filterState"
                            :loading="loading"
                            :total="total"
                            row-key="shop_id"
                            @sort-change="onSortChange"
                        >
                            <el-table-column :width="200" label="申请时间" prop="add_time"></el-table-column>
                            <el-table-column label="金额(元)" prop="amount"></el-table-column>
                            <el-table-column label="状态" sortable="custom">
                                <template #default="{ row }">
                                    <span>{{ row.status_text }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="到账方式">
                                <template #default="{ row }">
                                    {{ row.account_data?.account_type_text || '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="备注" prop="remark">
                                <template #default="{ row }">
                                    {{ row.remark || '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="拒绝理由" prop="audit_remark">
                                <template #default="{ row }">
                                    {{ row.audit_remark || '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column :width="120" fixed="right" label="操作">
                                <template #default="{ row }">
                                    <DialogForm
                                        v-if="row.status === 0"
                                        :params="{ act: 'detail', id: row.shop_withdraw_log_id }"
                                        isDrawer
                                        path="shop/shopAccountRaply/Info"
                                        title="提现详情"
                                        width="700px"
                                        @okCallback="loadFilter"
                                    >
                                        <a class="btn-link">处理申请</a>
                                    </DialogForm>
                                    <div v-else>--</div>
                                </template>
                            </el-table-column>
                            <template #empty>
                                <div class="empty-warp">
                                    <div v-if="!loading" class="empty-bg">暂无数据</div>
                                </div>
                            </template>
                        </el-table>
                    </a-spin>
                    <div v-if="total > 0" class="pagination-con">
                        <Pagination v-model:page="filterParams.page" v-model:size="filterParams.size" :total="total" @callback="loadFilter" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import "@/style/css/list.less";
import { DialogForm } from "@/components/dialog";
import { onMounted, reactive, ref } from "vue";
import { DeleteRecord, Pagination } from "@/components/list";
import { Image } from "@/components/image";
import { message } from "ant-design-vue";
import { useConfigStore } from "@/store/config";
import { WithdrawFilterParams, WithdrawFilterState } from "@/types/merchant/capitalfund/withdraw.d";
import { getWithdrawList, getWithdrawConfig } from "@/api/merchant/capitalfund/withdraw";
import { CustomSwitch } from "@/components/switch";
import { SelectTimeInterval } from "@/components/select";

const config: any = useConfigStore();
// 基本参数定义
const filterState = ref<WithdrawFilterState[]>([]);
const loading = ref<boolean>(false);
const total = ref<number>(0);
const filterParams = reactive<WithdrawFilterParams>({
    page: 1,
    size: config.get("page_size"),
    sort_field: "",
    sort_order: "",
    status: "",
    add_time_start:"",
    add_time_end:""
});
const status_list = ref()
// 获取列表的查询结果
const loadFilter = async () => {
    loading.value = true;
    try {
        const result = await getWithdrawList({ ...filterParams });
        filterState.value = result.filter_result;
        total.value = result.total;
        const config = await getWithdrawConfig()
        console.log(config)
        status_list.value = config.status_list
    } catch (error: any) {
        message.error(error.message);
    } finally {
        loading.value = false;
    }
};
onMounted(() => {
    loadFilter();
});

// 参数查询
const onSearchSubmit = () => {
    loadFilter();
};
// 修改排序
const onSortChange = ({ prop, order }: { prop: string; order?: string }) => {
    filterParams.sort_field = prop;
    filterParams.sort_order = order == "ascending" ? "asc" : order == "descending" ? "desc" : "";
    loadFilter();
};
</script>
<style lang="less" scoped></style>
